<script setup>
import {onMounted, onUnmounted, reactive, computed, ref} from 'vue';
import useDraw from "@/util/windows.ts"
import {format} from "@/util/plug.ts"
import * as echarts from 'echarts'
import "echarts-wordcloud";//引入词云
import {XJ} from "@/assets/xj.ts"

const {appRef, scale, calcRate, windowDraw, unWindowDraw} = useDraw();
//大屏适配

let time = ref('');
let dateTime = ref('');
let select_city = ref('1906');//选择的城市
let select_city2 = ref('1906');//选择的城市
let select_moneth = ref('1');
let tabs = reactive(['首页', '夜间经济', '月度分析', '用户监测']);
let active_index = reactive(0);
let search_list = reactive([
  {
    pm: 1,
    username: '张三',
    hh: 123456,
    num: 112
  },
  {
    pm: 2,
    username: '李四',
    hh: 8473743,
    num: 112
  },
  {
    pm: 3,
    username: '王五',
    hh: 2462234,
    num: 112
  },
  {
    pm: 4,
    username: '老六',
    hh: 3463462,
    num: 112
  },
  {
    pm: 5,
    username: '张三',
    hh: 4354535,
    num: 112
  },
  {
    pm: 6,
    username: '张三',
    hh: 1232131,
    num: 112
  },
  {
    pm: 7,
    username: '张三',
    hh: 212322,
    num: 112
  },
  {
    pm: 8,
    username: '张三',
    hh: 213233,
    num: 112
  },
]);
let pList = reactive(['乌鲁木齐市', '伊犁哈萨克自治州', '吐鲁番市', '铁门关市', '双和市']);
let select_list = reactive([
  {
    "name": "北屯市",
    "code": "1906",
    "center": "87.834419,47.326733"
  },
  {
    "name": "铁门关市",
    "code": "1996",
    "center": "85.670291,41.862997"
  },
  {
    "name": "双河市",
    "code": "1909",
    "center": "82.35365587,44.84052409"
  },
  {
    "name": "博尔塔拉蒙古自治州",
    "code": "0909",
    "center": "82.066363,44.906039"
  },
  {
    "name": "可克达拉市",
    "code": "1999",
    "center": "80.994153,43.940381"
  },
  {
    "name": "塔城地区",
    "code": "0901",
    "center": "82.980316,46.745364"
  },
  {
    "name": "和田地区",
    "code": "0903",
    "center": "79.921646,37.114406"
  },
  {
    "name": "昆玉市",
    "code": "1903",
    "center": "79.270193,37.215372"
  },
  {
    "name": "阿勒泰地区",
    "code": "0906",
    "center": "88.141253,47.844924"
  },
  {
    "name": "石河子市",
    "code": "0993",
    "center": "86.080397,44.305368"
  },
  {
    "name": "昌吉回族自治州",
    "code": "0994",
    "center": "87.308995,44.011044"
  },
  {
    "name": "五家渠市",
    "code": "1994",
    "center": "87.542852,44.166489"
  },
  {
    "name": "巴音郭楞蒙古自治州",
    "code": "0996",
    "center": "86.145298,41.764115"
  },
  {
    "name": "伊犁哈萨克自治州",
    "code": "0999",
    "center": "81.323691,43.917106"
  },
  {
    "name": "阿拉尔市",
    "code": "1997",
    "center": "81.280532,40.547205"
  },
  {
    "name": "喀什地区",
    "code": "0998",
    "center": "75.989746,39.470492"
  },
  {
    "name": "克孜勒苏柯尔克孜自治州",
    "code": "0908",
    "center": "76.167327,39.714734"
  },
  {
    "name": "克拉玛依市",
    "code": "0990",
    "center": "84.889239,45.577712"
  },
  {
    "name": "吐鲁番市",
    "code": "0995",
    "center": "89.190374,42.950736"
  },
  {
    "name": "胡杨河市",
    "code": "0992",
    "center": "84.827592,44.692894"
  },
  {
    "name": "哈密市",
    "code": "0902",
    "center": "93.515053,42.819346"
  },
  {
    "name": "新星市",
    "code": "2940",
    "center": "93.74831,42.797043"
  },
  {
    "name": "图木舒克市",
    "code": "1998",
    "center": "79.074965,39.867776"
  },
  {
    "name": "阿克苏地区",
    "code": "0997",
    "center": "80.265068,41.170712"
  },
  {
    "name": "乌鲁木齐市",
    "code": "0991",
    "center": "87.616824,43.825377"
  }
]);
let swt_index = reactive(0)

// const dateTime = computed(()=>{
//   return format("{y}-{m}-{d} 星期{a}")
// })


let timer = null;
const getTime = () => {
  //实时获取当前时间
  clearInterval(timer);
  let times = () => {
    time.value = format("{h}:{i}:{s}")
    dateTime.value = format("{y}-{m}-{d} 星期{a}")
  }
  times()
  timer = setInterval(times, 1000)
}

const loadMap = () => {
  //加载地图
  let china = echarts.init(document.getElementById('push_chart'));
  echarts.registerMap('china', {geoJSON: XJ});
  var option = {
    tooltip: {
      trigger: 'item'
    },
    geo: {
      type: 'map',
      name: '新疆',
      map: 'china',
      zoom: 3.1,
      left: '85%',
      top: '62%',
      selectedMode: false,
      showLegendSymbol: false, //去掉图例点
      label: {
        show: true,
        color: '#fff'
      },
      data: [
        {
          "name": "北屯市",
          "value": 100
        },
        {
          "name": "铁门关市",
          "value": 100
        },
        {
          "name": "双河市",
          "value": 100
        },
        {
          "name": "博尔塔拉蒙古自治州",
          "value": 100
        },
        {
          "name": "可克达拉市",
          "value": 100
        },
        {
          "name": "塔城地区",
          "value": 100
        },
        {
          "name": "和田地区",
          "value": 100
        },
        {
          "name": "昆玉市",
          "value": 100
        },
        {
          "name": "阿勒泰地区",
          "value": 100
        },
        {
          "name": "石河子市",
          "value": 100
        },
        {
          "name": "昌吉回族自治州",
          "value": 100
        },
        {
          "name": "五家渠市",
          "value": 100
        },
        {
          "name": "巴音郭楞蒙古自治州",
          "value": 100
        },
        {
          "name": "伊犁哈萨克自治州",
          "value": 100
        },
        {
          "name": "阿拉尔市",
          "value": 100
        },
        {
          "name": "喀什地区",
          "value": 100
        },
        {
          "name": "克孜勒苏柯尔克孜自治州",
          "value": 100
        },
        {
          "name": "克拉玛依市",
          "value": 100
        },
        {
          "name": "吐鲁番市",
          "value": 100
        },
        {
          "name": "胡杨河市",
          "value": 100
        },
        {
          "name": "哈密市",
          "value": 100
        },
        {
          "name": "新星市",
          "value": 100
        },
        {
          "name": "图木舒克市",
          "value": 100
        },
        {
          "name": "阿克苏地区",
          "value": 100
        },
        {
          "name": "乌鲁木齐市",
          "value": 100
        }
      ],
      itemStyle: {
        areaColor: {
          // type: 'radial',
          x: 0,
          y: 0.1,
          r: 0.9,
          colorStops: [{
            offset: 0, color: 'rgba(7, 23, 39,.6)'
          }, {
            offset: 1, color: 'rgba(56, 116, 190,1)'
          }],
          global: false
        },
        emphasis: {   // 鼠标hover显示
          show: true,
          disabled: false,
          label: {
            show: true
          },
          areaColor: 'rgba(120, 251, 253,.7)',
          textStyle: {
            color: '#00114F'
          }
        },
        borderColor: 'rgba(120, 251, 253,1)',
        shadowColor: 'rgba(24, 56, 94,.8)',
        shadowBlur: 1,
        shadowOffsetX: 10,
        shadowOffsetY: 10
      }
    },

    series: [
      {
        name: "",
        type: "effectScatter",
        coordinateSystem: "geo",
        rippleEffect: {
          number: 3,
          scale: 4,
          brushType: 'fill'//stroke
        },
        data: [
          {
            name: "乌鲁木齐市",
            value: ['87.62679', '43.825264']
          },
          {
            name: "乌鲁木齐市",
            value: [93.547968, 42.659709]
          },
          {
            name: "吐鲁番市",
            value: [89.244599, 42.938426]
          },
          {
            name: "和田市",
            value: [80.774803, 37.433774]
          },

        ],
        symbol: "circle",
        symbolSize: 12,
        hoverSymbolSize: 10,
        color: ['#79fbfd'],
        tooltip: {
          position: "right",
          color: "#000",
          formatter(data) {
            console.log(data)
            return `<div style="padding: 5px 10px;">【${data.data.name}】</div>`;
          },
        },
        label: {
          formatter: "{b}",
          position: "right",
          show: false
        },
        emphasis: {
          label: {
            show: false
          }
        }
      }
    ],

  };
  china.setOption(option);
}

const loadWordImg = () => {
  //加载词云图
  var data = {
    value: [
      {
        "name": "五一星光夜市",
        "value": 1446
      },
      {
        "name": "和田夜市",
        "value": 928
      },
      {
        "name": "奥体不夜城",
        "value": 906
      },
      {
        "name": "乌鲁木齐国际大巴扎",
        "value": 825
      },
      {
        "name": "盛达夜市",
        "value": 514
      },
      {
        "name": "天鹅广场夜市",
        "value": 486
      },
      {
        "name": "劳动街夜市",
        "value": 163
      },
      {
        "name": "夏哈拉夜市",
        "value": 86
      },
      {
        "name": "星空夜市",
        "value": 170
      },
      {
        "name": "升隆广场夜市",
        "value": 63
      },
      {
        "name": "新源夜市",
        "value": 33
      },

    ],
    //小鸟图片
    // image: ""
  }
  var myChart = echarts.init(document.getElementById('word_img'));
  //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
  myChart.setOption({
    tooltip: {
      show: false
    },
    series: [{
      type: 'wordCloud',
      gridSize: 1,
      sizeRange: [20, 55],
      rotationRange: [-35, 120],
      // maskImage: maskImage,
      textStyle: {
        fontFamily: "sans-serif",
        fontWeight: "bold",
        color: function (data){
          return ["#5bbff5","#5761a3","#c6c9cb","#7de2e4","#e0d762"][Math.round(Math.random() * 5)]
        }
        // Color can be a callback function or a color string
        // color: function () {
        //   // Random color
        //   /*"rgb(" +
        //   [
        //     Math.round(Math.random() * 255),
        //     Math.round(Math.random() * 255),
        //     Math.round(Math.random() * 255),
        //   ].join(",") +
        //   ")"*/
        //   return
        // },
      },
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      data: data.value
    }]
  })

  // var maskImage = new Image();
  // maskImage.src = data.image
  //
  // maskImage.onload = function () {
  // }s

}

const loadLIne = () => {
  //加载折线面积图
  var chartDom = document.getElementById('line');
  var myChart = echarts.init(chartDom);
  var option;
  let oneDay = 24 * 3600 * 1000;
  let date = [];
  let data = [Math.random() * 500];
  for (let i = 1; i < 290; i++) {
    var now = new Date((Date.now() + (oneDay * i)));
    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
    let num = Math.round((Math.random() - 0.5) * 20 + data[i - 1])
    while (num <= 0) {
      num = Math.round((Math.random() - 0.5) * 20 + data[i - 1]);
    }
    if (num > 0) {
      data.push(num);
    }
  }
  option = {
    xAxis: {
      name:'时间',
      position: 'bottom',
      type: 'category',
      boundaryGap: false,
      data: date,
      axisLabel: {
        show: true,
        formatter: (value, index) => {
          return format('{d}', value);
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      }
    },
    grid: {
      left: 60,
      right: 60,
      bottom: 40,
      top: 50,
      containLabel: false
    },
    yAxis: {
      name:"用电单位（kw）",
      type: 'value',
      itemStyle:{
        color:'#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          // 虚线
          color: 'rgba(29,40,50,1)',
          type: "dotted"
        }
      }
    },
    series: [
      {
        data: data,
        type: 'line',
        symbol: 'none',
        itemStyle: {
          color: '#5594b4'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(31, 198, 255, 0.5)'
            },
            {
              offset: 1,
              color: 'rgba(31, 198, 255, .1)'
            }
          ])
        }
      }
    ]
  };

  myChart.setOption(option)
}

const loaCirite = () => {
  //加载饼型图
  var chartDom = document.getElementById('cirite');
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'item'
    },
    color: ['#fff', '#f3e76a'],
    graphic: [
      {
        type: "group",
        id: "group",
        left: 'center',
        top: 'center',
        children: [
          {
            type: "text",
            left: 0,
            style: {
              fill: "#fff",
              fontSize: 26,
              text: "68"
            }
          },
          {
            type: "text",
            left: 35,
            top: 8,
            style: {
              fill: "#fff",
              fontSize: 16,
              text: "%"
            }
          }
        ]
      },
      {
        type: 'circle',
        id: 'circle',
        left: 'center',
        top: 'center',
        origin: [50, 20],
        shape: {
          r: 40
        },
        style: {
          fill: 'rgba(0,0,0,0)',
          stroke: '#255067'
        }
      },
      {
        type: 'circle',
        id: 'circle2',
        left: 'center',
        top: 'center',
        shape: {
          r: 60
        },
        style: {
          fill: 'rgba(0,0,0,0)',
          stroke: '#255067'
        }
      },
    ],
    series: [
      {
        name: '用电增长',
        type: 'pie',
        radius: ['90%', '80%'],
        itemStyle: {
          shadowColor: 'rgba(255,255,255, 1)',
          shadowBlur: 8,
          borderRadius: 30
        },
        emphasis: {
          disabled: true,
          label: {
            show: false,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        },
        data: [
          {value: 320, name: '环比增长'},
          {value: 680, name: '同比增长'},
        ]
      }
    ]
  };

  myChart.setOption(option);

}

const loaCirite2 = () => {
  //加载饼型图2
  let chartDom = document.getElementById('cirite2');
  let myChart = echarts.init(chartDom);
  let option;
  let colorList = [
    {
      color1: 'rgba(31, 198, 255, 1)',
      color2: '#193b4f'
    },
    {
      color1: 'rgba(89, 255, 255, 1)',
      color2: '#204a4e'
    },
    {
      color1: 'rgba(245, 231, 79, 1)',
      color2: '#384527',
    },
    {
      color1: 'rgba(72, 82, 144, 1)',
      color2: '#391c2e',
    },
    {
      color1: '#fff',
      color2: '#3c494f'
    }
  ]
  let dataList = [
    {
      value: 1028,
      name: '餐饮类'
    },
    {
      value: 2650,
      name: '晚间购物'
    },
    {
      value: 2314,
      name: '旅游类'
    },
    {
      value: 2050,
      name: '娱乐类'
    },
    {
      value: 1028,
      name: '学习类'
    },
  ];
  let sum = dataList.reduce((a, b) => a + b.value, 0)
  option = {
    tooltip: {
      trigger: 'item'
    },
    graphic: [
      {
        type: 'circle',
        id: 'circle',
        left: '110',
        top: 'center',
        shape: {
          r: 30
        },
        style: {
          fill: 'rgba(18, 41, 48, 1)'
        }
      },
      {
        type: 'circle',
        id: 'circle2',
        left: '50',
        top: 'center',
        shape: {
          r: 90
        },
        style: {
          fill: 'rgba(0,0,0,0)',
          stroke: 'rgba(47,124,166,.6)'
        }
      },
      {
        type: 'circle',
        id: 'circle3',
        left: '40',
        top: 'center',
        shape: {
          r: 100
        },
        style: {
          fill: 'rgba(0,0,0,0)',
          stroke: 'rgba(47,124,166,1)'
        }
      },
    ],
    legend: {
      show: true,
      orient: "vertical",
      right: '20',
      itemWidth: 10, // 图例图形宽度
      itemHeight: 10,
      top: 'center',
      icon: 'circle',
      data: [
        '餐饮类',
        '晚间购物',
        '旅游类',
        '娱乐类',
        '学习类',
      ],
      textStyle: {
        color: '#B9B9B9',
        fontSize: '14'
      },
      formatter: function (name) {
        var index = dataList.map((item) => item.name).indexOf(name);
        return (
            name +
            "\t\t\t\t" +
            ((dataList[index].value / sum || 0) * 100).toFixed(1) +
            "%"
        );
      }
    },
    series: [
      {
        name: '夜间用电分布',
        type: 'pie',
        radius: ['70%', '60%'],
        left: 0,
        center: ['140', '50%'],
        itemStyle: {
          borderWidth: 5,
          borderColor: '#0b191e'
        },
        label: {
          show: false
        },
        emphasis: {
          disabled: true,
          label: {
            show: false,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: JSON.parse(JSON.stringify(dataList)).map((item, index) => {
          item.itemStyle = {
            color: colorList[index].color1
          }
          return item
        })
      },
      {
        name: '',
        type: 'pie',
        radius: ['60%', '40%'],
        left: 0,
        center: ['140', '50%'],
        itemStyle: {
          borderWidth: 5,
          borderColor: '#0b191e'
        },
        label: {
          show: false
        },
        emphasis: {
          disabled: true,
          label: {
            show: false,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: JSON.parse(JSON.stringify(dataList)).map((item, index) => {
          item.itemStyle = {
            color: colorList[index].color2
          }
          return item
        })
      },
    ]
  };

  myChart.setOption(option);

}

onUnmounted(() => {
  unWindowDraw()
})
onMounted(() => {
  windowDraw();
  calcRate();
  /* 以上为大屏适配 */
  getTime();//获取当前时间段
  loadMap();//加载地图
  loadWordImg();//加载词云图
  loadLIne();//加载折线面积图
  loaCirite();//加载饼形图
  loaCirite2();//加载饼形图2
})

</script>

<template>
  <div class="header">
    <div class="utils">
      <span class="time">{{ time }}</span>
      <span class="date">{{ dateTime }}</span>
      <span class="weather">天气：多云<img src="@/assets/image/weather.png" class="icon" alt=""></span>
    </div>
    <div class="header_title">
      <span>新疆电力——夜色经济</span>
    </div>
    <div class="tabs">
      <div class="tab" v-for="(item,index) in tabs" :key="index" :class="{active:index==active_index}">{{ item }}</div>
    </div>
  </div>
  <div class="main">
    <div class="main1">
      <div class="main_chart1 bg">
        <div class="bg_title">夜间用户电力排行</div>
        <div class="search_div">
          <div class="item">
            <Select transfer transfer-class-name="transfer" v-model="select_city" style="width:100%">
              <Option v-for="(item,index) in select_list" :key="index" :value="item.code">{{item.name}}</Option>
            </Select>
          </div>
          <div class="item">
            <Input search placeholder="搜索用户名或户号"/>
          </div>
        </div>
        <div class="search_list">
          <div class="search_li top">
            <div class="th">排名</div>
            <div class="th">用户名</div>
            <div class="th">户号</div>
            <div class="th">用电量（kwh）</div>
          </div>
          <div class="search_li" v-for="(item,index) in search_list" :key="index">
            <div class="td" v-if="index == 0"><img src="@/assets/image/one.png" class="pm" alt=""></div>
            <div class="td" v-else-if="index == 1"><img src="@/assets/image/two.png" class="pm" alt=""></div>
            <div class="td" v-else-if="index == 2"><img src="@/assets/image/three.png" class="pm" alt=""></div>
            <div class="td" v-else>{{ item.pm }}</div>
            <div class="td">{{ item.username }}</div>
            <div class="td">{{ item.hh }}</div>
            <div class="td">{{ item.num }}</div>
          </div>
        </div>
      </div>
      <div class="main_chart2 bg">
        <div class="bg_title">全省地区夜间受喜爱度</div>
        <div id="word_img"></div>
      </div>
      <div class="main_chart3 bg">
        <div class="bg_title">用电趋势</div>
        <div id="line"></div>
      </div>
    </div>
    <div class="main2">
      <div class="bg" id="push_chart"></div>
      <div class="ydl_fixed">
        <div>
          <span class="name">用电量：</span><span class="value">139.20kw-h</span>
        </div>
        <div>
          <span class="name">电力指数：</span><span class="value">81.20</span>
        </div>
      </div>
    </div>
    <div class="main3">
      <div class="main_chart4 bg">
        <div class="bg_title">用电增长</div>
        <div class="cirite_select">
          <Select transfer transfer-class-name="transfer" v-model="select_moneth" style="width:85px;height: 32px">
            <Option value="1">一月</Option>
            <Option value="2">二月</Option>
            <Option value="3">三月</Option>
          </Select>
        </div>
        <div class="chart">
          <div id="cirite"></div>
          <div class="zz">
            <div class="item y">
              <img src="@/assets/image/yellow.png" alt="" class="img">
              <span class="bfb">68%</span>
              <span class="tbzz">同比增长</span>
            </div>
            <div class="item b">
              <img src="@/assets/image/white.png" alt="" class="img">
              <span class="bfb">36%</span>
              <span class="tbzz">环比增长</span>
            </div>
          </div>
        </div>

      </div>
      <div class="main_chart5 bg">
        <div class="bg_title">夜间用电发布</div>
        <div class="cirite2">
          <Select transfer transfer-class-name="transfer" v-model="select_city2" style="width:177px;height: 32px">
            <Option v-for="(item,index) in select_list" :key="index" :value="item.code">{{item.name}}</Option>
          </Select>
        </div>
        <div id="cirite2"></div>
      </div>
      <div class="main_chart6 bg">
        <div class="bg_title">夜间经济活力指数排名</div>
        <div class="fc_div">
          <div class="switch_tab">
            <div class="tab" :class="{active:swt_index == 0}" @click="swt_index=0">按市</div>
            <div class="tab" :class="{active:swt_index == 1}" @click="swt_index=1">按区</div>
          </div>
          <div class="fc_item one">
            <span class="title">NO.1</span>
            <span class="name">{{ pList[0] }}</span>
          </div>
          <div class="fc_item two">
            <span class="title">NO.2</span>
            <span class="name">{{ pList[1] }}</span>
          </div>
          <div class="fc_item three">
            <span class="title">NO.3</span>
            <span class="name">{{ pList[2] }}</span>
          </div>
          <div class="fc_item four">
            <span class="title">NO.4</span>
            <span class="name">{{ pList[3] }}</span>
          </div>
          <div class="fc_item five">
            <span class="title">NO.5</span>
            <span class="name">{{ pList[4] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.transfer.ivu-select-dropdown {
  background-color: #132a35;
  padding: 0;

  .ivu-select-item {
    color: #fff;
    height: 32px;
    line-height: 32px;
    padding-top: 0;
    padding-bottom: 0;

    &:hover {
      background-color: #132a35;
    }
  }
  .ivu-select-item-focus{
    background: #203643;
  }
}
</style>
<style lang="scss" scoped>
.header {
  width: 1920px;
  height: 63px;
  padding: 0 8px;
  display: flex;

  .utils {
    line-height: 63px;
    color: #fff;
    width: 430px;
    background-image: url("~@/assets/image/GroupLeft.png");
    background-size: 100% 100%;
    padding: 0 20px;
    user-select: none;

    .time {
      color: rgba(31, 198, 255, 1);
      font-size: 18px;
      font-weight: 600;
    }

    .date {
      margin: 0 10px;
      color: rgba(31, 198, 255, 1);
      padding: 0 16px;
      font-size: 16px;
      border-left: 1px solid rgba(31, 198, 255, 1);
      border-right: 1px solid rgba(31, 198, 255, 1);
    }

    .weather {
      color: rgba(31, 198, 255, 1);
      font-size: 16px;

      .icon {
        width: 20px;
        margin-left: 10px;
        vertical-align: middle;
      }
    }
  }

  .header_title {
    width: 1040px;
    height: 63px;
    margin: 3px 10px 0;
    background-image: url("~@/assets/image/title.png");
    background-size: 100% 100%;
    position: relative;

    span {
      color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 28px;
    }
  }

  .tabs {
    width: 430px;
    height: 63px;
    background-image: url("~@/assets/image/GroupRight.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 0 0;

    .tab {
      width: 87px;
      height: 43px;
      line-height: 43px;
      text-align: center;
      background-image: url("~@/assets/image/menu.png");
      background-size: 100% 100%;
      color: #1FC6FF;
      cursor: pointer;
      user-select: none;

      &.active {
        color: #fff;
        background-image: url("~@/assets/image/menu_active.png");
      }
    }
  }
}

.bg {
  //每个方块的背景图片框框
  background-image: url("~@/assets/image/background.png");
  background-size: 100% 100%;
}

.bg_title {
  //方块标题背景框框
  background-image: url("~@/assets/image/GroupTitle.png");
  background-size: 100% 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  font-size: 20px;
}

:deep(.ivu-select-selection) {
  background-color: #132a35;
  color: #B4C0CC;
  border-color: #7EDCFB;
}

.main {
  width: 1920px;
  height: 1017px;
  display: flex;
  justify-content: space-between;
  padding: 28px 20px 10px;

  .main_chart1 {
    width: 100%;
    height: 365px;
  }

  .main_chart2 {
    width: 100%;
    height: 258px;
  }

  .main_chart3 {
    width: 100%;
    height: 312px;
  }

  .main_chart4 {
    width: 100%;
    height: 258px;
  }

  .main_chart5 {
    width: 100%;
    height: 385px;
  }

  .main_chart6 {
    width: 100%;
    height: 299px;
  }

  .main1 {
    width: 453px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .search_div {
      padding: 14px 10px;
      display: flex;
      justify-content: space-evenly;


      :deep(.ivu-input) {
        background-color: #132a35;
        color: #B4C0CC;
        border-color: #7EDCFB;

      }

      :deep(.ivu-input-wrapper) {
        .ivu-input-search-icon {
          color: #7EDCFB;
        }
      }

      .item {
        width: 45%;
        height: 33px;
      }
    }

    .search_list {
      height: 254px;
      overflow-y: auto;

      .search_li {
        display: flex;

        &:nth-child(even) {
          background-color: rgba(54, 94, 114, 0.24);
        }

        &:nth-child(odd) {
          background-color: rgba(54, 94, 114, 0.50);
        }

        &.top {
          position: sticky;
          top: 0;
          border: 1px solid;
          background: linear-gradient(180deg, rgba(0, 0, 0, .8) 10%, rgba(42, 83, 103, 0.9) 80%);
          border-image: linear-gradient(180deg, rgba(90, 211, 251, 0), rgba(90, 211, 251, 1)) 1 1;
        }

        .th {
          width: 25%;
          height: 36px;
          line-height: 36px;
          color: #B4C0CC;
          text-align: center;
        }

        .td {
          width: 25%;
          height: 36px;
          line-height: 36px;
          text-align: center;
          color: #B4C0CC;
          .pm{
            width: 34px;
            height: auto;
            vertical-align: middle;
          }
        }
      }
    }

    #word_img {
      width: 100%;
      height: 208px;
    }

    #line {
      width: 100%;
      height: 262px;
    }
  }

  .main2 {
    width: 946px;
    height: 100%;
    background-image: url("~@/assets/image/pic.jpg");
    background-size: 100% 100%;
    position: relative;
    .ydl_fixed{
      position: absolute;
      z-index: 10;
      left: 40px;
      bottom: 40px;
      font-size: 18px;
      font-weight: 500;
      .name{
        color: #fff;
      }
      .value{
        color: #66bec1;

      }
    }
    #push_chart {
      width: 100%;
      height: 100%;
    }
  }

  .main3 {
    width: 455px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .cirite_select {
      padding: 12px 24px;
    }

    .chart {
      width: 100%;
      height: 120px;
      display: flex;
      align-items: center;

      .zz {
        display: flex;
        flex-direction: column;

        .item {
          width: 214px;
          height: 50px;
          display: flex;
          align-items: center;
          padding: 0 15px;
          color: #fff;

          .img {
            width: 26px;
            height: 26px;
          }

          .tbzz {
            font-size: 14px;
          }

          .bfb {
            font-size: 24px;
          }

          &.y {
            background: url("~@/assets/image/y.png");
            background-size: 100% 100%;

            .bfb {
              margin: 0 15px 8px 15px;
              color: #ede941;
            }

            .tbzz {
              margin-bottom: 8px;
            }
          }

          &.b {
            background: url("~@/assets/image/b.png");
            background-size: 100% 100%;
            margin-top: 8px;
            flex-direction: row-reverse;

            .bfb {
              margin: 8px 15px 0 15px;
            }

            .tbzz {
              margin-top: 8px;
            }
          }
        }
      }
    }

    #cirite {
      width: 120px;
      height: 120px;
      margin: 0 30px;
    }

    .cirite2 {
      width: 100%;
      padding: 35px 20px;
    }

    #cirite2 {
      width: 100%;
      height: 233px;
    }

    .fc_div {
      position: relative;
      height: 249px;
      .switch_tab{
        position: absolute;
        right: 13px;
        top: 19px;
        .tab{
          display: inline-block;
          width: 52px;
          height: 29px;
          line-height: 29px;
          cursor: pointer;
          user-select: none;
          text-align: center;
          margin-left: 8px;
          background-color: rgba(15, 40, 57, 1);
          color: rgba(180, 192, 204, 1);
          &.active{
            background-image: url("@/assets/image/active_tab.png");
            background-size: 100% 100%;
            color: rgba(31, 198, 255, 1);
          }
        }
      }
      .fc_item {
        position: absolute;
        background: url("~@/assets/image/fc_item.png");
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        .name {
          font-size: 13px;
          color: rgba(100, 201, 232, 1);
          margin-top: 4px;
          line-height: 1;
        }

        .title {
          font-size: 18px;
          font-weight: 600;
          line-height: 1;
          color: #fff;
        }

        &.one {
          width: 122px;
          height: 138px;
          left: 42px;
          top: 14px;
        }

        &.two {
          width: 100px;
          height: 113px;
          left: 110px;
          top: 123px;
          padding: 0 15px;

          .title {
            font-size: 16px;
          }

          .name {
            font-size: 13px;
          }
        }

        &.three {
          width: 90px;
          height: 103px;
          left: 167px;
          top: 44px;
          padding: 0 12px;

          .title {
            font-size: 16px;
          }

          .name {
            font-size: 13px;
          }
        }

        &.four {
          width: 80px;
          height: 93px;
          left: 213px;
          top: 127px;
          padding: 0 12px;

          .title {
            font-size: 16px;
          }

          .name {
            font-size: 13px;
          }
        }

        &.five {
          width: 70px;
          height: 83px;
          left: 260px;
          top: 63px;
          padding: 0 12px;

          .title {
            font-size: 14px;
          }

          .name {
            font-size: 12px;
          }
        }
      }
    }

  }
}
</style>
